<!--
 作者：ex_wangshuai
 日期：2016-11-17
 功能：首页-掌天下-产品体验品牌对比
 参数：
 事件：
-->
<template>
  <div class="experienceBrand">
    <div class="loading-box">
      <img src="../../../../static/img/loading.gif" class="loading">
    </div>
    <toolbar :view-title="viewTitle">
      <div class="leftButton" type="button" @click="this.$broadcast('goBack')" slot="left-button">&nbsp;</div>
      <div class="rightButton"
           type="button"
           slot='right-button'>
        <div class="filterButton" @click="showFilter" v-show="!filterOpenState">
          <span class="filterIcon" :page-id="routeKey">&nbsp;</span>
          <span>筛选</span>
        </div>
        <div class="menuButton" @click="showSlideMenu" v-show="!filterOpenState">
          <span class="menuIcon">&nbsp;</span>
          <span>菜单</span>
        </div>
        <span v-show="filterOpenState" @click="doFilter" class="filterOver">完成</span>
      </div>
    </toolbar>
    <div class="filter-message-box clearfix">
      <a class="filter-condition" @click="showFilter('pinlei')" href="javascript:;">{{pinlei}}</a>
      <a class="filter-condition" @click="showFilter('pinpai')" href="javascript:;">{{pinpai}}</a>
      <a class="filter-condition" @click="showFilter('pingtai')" href="javascript:;">{{pingtai}}</a>
      <a v-if="startTime" class="filter-condition" @click="showFilter('shijian')" href="javascript:;">{{startTime | timeFilter}} - {{endTime | timeFilter}}</a>
    </div>
    <div class="experience-brand-content">
      <!--1-->
      <div class="slide">
        <div class="title-time">
          <p class="title">{{charts1.subTitle}}</p>
        </div>
        <!--筛选条件-->
        <div class="condition-filter" v-if="conditionList.length > 1">
          <ul class="display-flex">
            <li :class="['flex1', { 'brandActive': activeStyle == 1 }]" @click="subData(conditionList[0], 1)">
              {{conditionList[0]}}
            </li>
            <li :class="['flex1', { 'brandActive': activeStyle == 2 }]" @click="subData(conditionList[1], 2)">
              {{conditionList[1]}}
            </li>
            <li :class="['flex1', { 'brandActive': activeStyle == 3 }]" @click="subData(conditionList[2], 3)">
              {{conditionList[2]}}
            </li>
            <li :class="['flex1', { 'brandActive': activeStyle == 4 }]" @click="showMore(4)">
              {{conditionList[3]}}
            </li>
          </ul>
          <div class="active-border"></div>
        </div>
        <div class="filterMore" v-if="filterCon">
          <div class="more1">
            <p class="moreTitle">二级指标</p>
            <ul class="display-flex flex-wrap">
              <li v-for="more1 in conditionListMore" @click="subMore(more1, $index)"
                  :class="[{ 'category-active' :  $index == categorysIndex }]">{{more1}}
              </li>
            </ul>
          </div>
          <div class="more1" v-if="conditionListSub.length">
            <p class="moreTitle">三级指标</p>
            <ul class="display-flex flex-wrap">
              <li v-for="more2 in conditionListSub" @click="subData(more2, $index, 1)"
                  :class="[{ 'category-active' :  more2 == categorysActiveIndex }]">{{more2}}
              </li>
            </ul>
          </div>
        </div>
        <div v-show="charts1.message" class="important">
          {{charts1.message}}
        </div>
        <div class="chartContainer chartContainer0" v-show="charts1.detail != ''">
        </div>
        <div class="item-data" v-if="charts1.detail == ''">
          暂无数据
        </div>
        <div class="division0"></div>
      </div>
      <!--2-->
      <div class="slide">
        <div class="title-time">
          <p class="title">{{charts2.subTitle}}</p>
        </div>
        <div class="chartContainer chartContainer1" v-show="charts2.detail != ''">
        </div>
        <div class="item-data" v-if="charts2.detail == ''">
          暂无数据
        </div>
      </div>
    </div>
    <page-turning :mkey="routeKey" :page-id="'industry'">
    </page-turning>
    <slide-list v-if="showList">
    </slide-list>
    <filter-view v-show="filterOpenState"
                 :default-org-id="defaultOrgId"
                 :default-category="defaultCategory"
                 :default-category-id="defaultCategoryId"
                 :choose-platforms= "pingtai"
                 :choose-platforms-id= "pingtaiId"
                 :page-id="routeKey"
                 :filter-button = "filterButton"
                 :default-start-date="startTime"
                 :default-end-date="endTime">
    </filter-view>
    <loading :show="showLoading"></loading>
    <confirm :show.sync="timeoutStatus"
             title="加载失败,您可以"
             cancel-text="返回首页"
             confirm-text="重新加载"
             @on-cancel="this.$route.router.go('/home')"
             @on-confirm="reload">
    </confirm>
    <confirm :show.sync="show" title="是否退出？" cancel-text="取消" confirm-text="确定" @on-confirm="onAction('确认')"></confirm>
  </div>
</template>

<script>
  //  import Echarts from 'echarts'
  // import Echarts from 'echarts/lib/echarts.js'
  import 'echarts/lib/component/legend'
  import 'echarts/lib/component/tooltip'
  import 'echarts/lib/chart/line'
  import 'echarts/lib/chart/bar'
  import Toolbar from '../../common/Toolbar.vue'
  import pageTurning from '../../common/pageTurning.vue'
  import slideList from '../list/slideList.vue'
  import FilterView from '../../common/FilterView.vue'
  import Loading from 'vux/dist/components/Loading'
  import Confirm from 'vux/dist/components/Confirm'

  export default{
    components: {
      Toolbar,
      pageTurning,
      slideList,
      FilterView,
      Loading,
      Confirm
    },
    data () {
      var data = {}
      data.show = false
      data.timeoutStatus = false
      data.pinlei = '所有品类'
      data.pinpai = '所有品牌'
      data.pingtai = '所有平台'
      data.pingtaiId = ''
      data.startTime = ''
      data.endTime = ''
      data.filterButton = ''
      data.size10 = 0.19
      data.size12 = 0.23
      data.size13 = 0.25
      data.size14 = 0.27
      data.activeStyle = 1
      data.showLoading = false
      data.defaultOrgId = ''
      data.defaultCategory = ''
      data.defaultCategoryId = ''
      data.categorysActiveIndex = -1
      data.categorysIndex = -1
      data.showList = false
      data.routeKey = ''
      data.filterOpenState = false
      data.property = ''
      data.viewTitle = ''
      data.conditionList = []
      data.conditionListMore = []
      data.conditionListSub = []
      data.filterCon = false
      // 渲染echarts需要用到的数据
      data.charts = []
      data.charts1 = {}
      data.charts2 = {}
      data.myChart = {}
      data.singleBarData = []
      data.singleBaryAxis = []
      data.singleBarOption = ''
      data.lineLegend = []
      data.lineXaxis = []
      data.lineSeries = []
      data.lineSelected = [{}]
      data.lineOption = ''
      data.firstPageParams = {
        mkey: 'experienceBrand',
        brand: '',
        brand_id: '',
        category_id: '',
        category: '',
        dateSeg: 'other',
        startTime: '',
        endTime: '2016-11-16'
      }
      data.pageParams = {
        mkey: 'experienceBrand',
        category_id: '',
        category: '',
        platform_id: '',
        platform: '',
        dateSeg: '',
        startTime: '',
        endTime: '',
        property: ''
      }
      data.experienceBrandFilter = {
        pageId: 62,
        category_id: '',
        category: '',
        dateSeg: 'other',
        startTime: '',
        endTime: '',
        dimension: '产品体验',
        attribute: ''
      }
      return data
    },
    watch: {
      singleBarData: function () {
        var chartData = this.charts[1].detail
        var singleBarOption = {
          tooltip: {
            trigger: 'axis',
            // formatter: '{b}<br/>差评率:{c}%',
            formatter: function (params) {
              var content = '差评数:' + chartData[params[0].dataIndex].bad + '</br>'
              content += '总评数:' + chartData[params[0].dataIndex].total + '</br>'
              content += params[0].name + ':' + params[0].value + '%' + '</br>'
              return content
            },
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '5%',
            right: '13%',
            bottom: '0%',
            top: '1%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            splitNumber: 2,
            boundaryGap: [0, 0.01],
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: false
            }
          },
          yAxis: {
            type: 'category',
            data: this.singleBaryAxis,
            axisLine: {
              show: true,
              lineStyle: {
                color: '#999'
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color: '#999',
                fontSize: this.size14
              }
            }
          },
          series: {
            type: 'bar',
            data: this.singleBarData,
            barWidth: 30,
            label: {
              normal: {
                show: true, // 必须加
                position: 'right',
                formatter: '{c}%',
                textStyle: {
                  color: '#666666',
                  fontSize: this.size14
                }
              }
            }
          },
          color: ['#4A90E2', '#BCDBFF']
        }
        var lineOption = {
          tooltip: {
            formatter: function (params, ticket, callback) {
              var content = ''
              for (var i = 0; i < params.length; i++) {
                content += '<span style="display:inline-block;width:0.8em;height:0.8em;background-color:' + params[i].color + '"></span>  ' + params[i].seriesName + ': ' + params[i].value + '%' + '<br/>'
              }
              return content
            },
            trigger: 'axis'
          },
          legend: {
            data: this.lineLegend,
            itemWidth: this.size10,
            itemHeight: this.size10,
            itemGap: 2 * this.size10 - 2,
            textStyle: {
              color: '#999',
              fontSize: this.size13
            },
            top: '3%',
            left: '5%',
            right: '2.5%',
            selected: this.lineSelected[0]
          },
          grid: {
            show: true,
            top: '22%',
            left: '10%',
            right: '8%',
            bottom: '3%',
            containLabel: true,
            backgroundColor: 'rgba(244, 249, 255, 0.4)',
            borderWidth: 0
          },
          xAxis: {
            type: 'category',
            axisLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: '#4A90E2'
              }
            },
            axisLabel: {
              textStyle: {
                color: '#999'
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: '#4A90E2'
              }
            },
            splitNumber: 3,
            data: this.lineXaxis
          },
          yAxis: {
            type: 'value',
            axisLine: {
              show: false,
              lineStyle: {
                type: 'dashed',
                color: '#4A90E2'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color: '#999'
              },
              formatter: '{value}%'
            },
            splitLine: {
              show: false
            }
          },
          color: ['#FF8B8B', '#FF8BD1', '#FFD38B', '#B889FF', '#8BB4FF', '#8BB4FF', '#77E1E7', '#67D7FF', '#E4A3FF', '#BCDBFF'],
          series: this.lineSeries
        }
        this.$nextTick(function () {
          // 返回的数据需要用echarts显示的s
          var chartDomLength = document.getElementsByClassName('chartContainer').length
          var chartDomArray = new Array(chartDomLength)
          for (var x = 0; x < chartDomLength; x++) {
            chartDomArray[x] = document.getElementsByClassName('chartContainer')[x]
            this.myChart = window.Echarts.init(chartDomArray[x])
            if (x === 0) {
              this.myChart.setOption(singleBarOption)
            } else if (x === 1) {
              this.myChart.setOption(lineOption)
            }
          }
        })
      }
    },
    methods: {
      reload: function () {
        window.location.reload()
      },
      goBack: function () {
//        window.history.back()
        this.show = true
      },
      onAction: function (value) {
        if (value === '确认') {
          window.cordova.exec(function (success) {
          }, function (error) {
            window.alert('Error: ' + error)
          }, 'MideaCommon', 'exit', [])
        }
      },
      doFilter: function () {
        this.$broadcast('doFilter')
      },
      showFilter: function (value) {
        this.filterButton = value
        this.filterOpenState = true
      },
      showSlideMenu: function () {
        this.showList = !this.showList
        var self = this
        setTimeout(function () {
          self.$broadcast('slideStart')
        }, 0)
      },
      // 线图数据处理
      lineDataFunc: function (z, sales) {  // sales 销量
        var lineDataLength = this.charts[z].detail.length
        var lineData = []
        // 判断几个类别 x
        for (var x = 1; x < lineDataLength; x++) {
          if (this.charts[z].detail[0].date !== this.charts[z].detail[x].date) {
            break
          }
        }
        // legend
        var lineLegend = []
        for (var e = 0; e < x; e++) {
          lineLegend.push({'name': this.charts[z].detail[e].brand, 'icon': 'roundRect'})
          lineData.push([])
          for (var d = e; d < lineDataLength; d = d + x) {
            lineData[e].push(this.charts[z].detail[d][sales])
          }
        }
        this.lineLegend = lineLegend
        // xAxis
        var lineXaxis = []
        for (var f = 0; f < lineDataLength; f = f + x) {
          lineXaxis.push(this.charts[z].detail[f].date)
        }
        this.lineXaxis = lineXaxis
        // series
        var lineSeries = []
        for (var g = 0; g < x; g++) {
          lineSeries.push({'name': this.lineLegend[g].name, 'type': 'line', 'data': lineData[g]})
        }
        this.lineSeries = lineSeries
        // legend默认选中的线
        var legendData = this.lineLegend
        var lineSelectedData = this.lineSelected[0]
        for (var j = 0; j < x; j++) {
          if (j > 3) {
            lineSelectedData[legendData[j].name] = false
          }
        }
        this.lineSelected[0] = lineSelectedData
      },
      // 第一次数据请求
      httpFunction: function (url, params) {
        this.$http.post(url, params, {_timeout: 30000}).then((res) => {
          if (res.json().error) {
            this.timeoutStatus = true
            return
          }
          var data = res.json()
          this.experienceBrandFilter.category = data.category || ''
          this.experienceBrandFilter.category_id = data.category_id || ''
          this.defaultOrgId = data.org_code || ''
          this.defaultCategory = data.category || ''
          this.defaultCategoryId = data.category_id || ''
          this.pinlei = data.categoryCnd || data.category
          this.pinpai = data.brandCnd || data.brand
          this.pingtai = data.platformCnd || data.platform
          this.pingtaiId = data.platform_id || ''
          this.startTime = data.startTime || ''
          this.endTime = data.endTime || ''
          this.$broadcast('loadDataDone')
          document.getElementsByClassName('loading-box')[0].style.display = 'none'
          this.viewTitle = res.json().title
          this.charts = res.json().chartDatas
          this.charts1 = this.charts[1]
          this.charts2 = this.charts[2]
          // 页内筛选选项
          if (this.charts[0].detail[0]) {
            this.conditionList = this.charts[0].detail[0].top_property
            this.conditionList.push('更多')
            this.conditionListMore = this.charts[0].detail[0].attributes
          }
          // 第一个单柱图
//          if (this.charts[1].detail.length !== 0) {
          var threeBar = this.charts[1].detail
          var singleBaryAxis = []
          var singleBarData = []
          for (var c = 0; c < threeBar.length; c++) {
            singleBaryAxis.push(threeBar[c].brand)
            singleBarData.push(threeBar[c].bad_rate)
          }
          this.singleBaryAxis = singleBaryAxis
          this.singleBarData = singleBarData
//          }
          // 第二个多线图
//          if (this.charts[2].detail.length !== 0) {
          this.lineDataFunc(2, 'bad_rate')
//          }
          if (res.json().chartDatas.length === 0) {
            document.getElementsByClassName('experience-brand-content')[0].style.display = 'none'
            document.getElementsByClassName('no-data')[0].style.display = 'block'
            return
          }
          setTimeout(function () {
            var htmlHeight = document.documentElement.clientHeight
            var toorBarHeight = document.getElementsByClassName('toolbar')[0].clientHeight
            var filterMessageBox = document.getElementsByClassName('filter-message-box')[0].clientHeight
            var tapHeight = document.getElementsByClassName('tab')[0].clientHeight
            var contentDiv = document.getElementsByClassName('experience-brand-content')[0]
            contentDiv.style.height = htmlHeight - toorBarHeight - filterMessageBox - tapHeight + 'px'
          }, 0)
        }, (res) => {
          this.timeoutStatus = true
        })
      },
      // 更多选项显示隐藏
      showMore: function (sub) {
        this.activeStyle = sub
        document.querySelector('.active-border').style.left = 80 + '%'
        this.filterCon = !this.filterCon
      },
      // 更多选项里面的子选项
      subMore: function (sub, sub2) {
        this.categorysIndex = sub2
        this.experienceBrandFilter.attribute = sub
        this.showLoading = true
        this.$http.post(window.interface.experienceBrandFilter, this.experienceBrandFilter, {_timeout: 30000}).then((res) => {
          if (res.json().error) {
            this.timeoutStatus = true
            return
          }
          this.showLoading = false
          this.conditionListSub = res.json().propertyList
        }, (res) => {
          this.timeoutStatus = true
        })
      },
      // 点击三级选项重新发送请求
      subData: function (sub2, sub3, sub4) {
        this.showLoading = true
        if (!sub4) {
          this.filterCon = false
          this.activeStyle = sub3
          this.categorysActiveIndex = -1
          this.categorysIndex = -1
          sub3 = sub3 - 1
          document.querySelector('.active-border').style.left = (sub3 * 25) + 5 + '%'
        } else {
          this.categorysActiveIndex = sub2
        }
        // 请求
        this.pageParams.property = sub2
        this.$http.post(window.interface.indusPage, this.pageParams, {_timeout: 30000}).then((res) => {
          if (res.json().error) {
            this.timeoutStatus = true
            return
          }
          this.showLoading = false
          this.charts = res.json().chartDatas
          this.charts1 = this.charts[1]
          this.charts2 = this.charts[2]
          // 页内筛选选项
          if (this.charts[0].detail[0]) {
            this.conditionList = this.charts[0].detail[0].top_property
            this.conditionList.push('更多')
            this.conditionListMore = this.charts[0].detail[0].attributes
          }
          // 第一个单柱图
          var threeBar = this.charts[1].detail
          var singleBaryAxis = []
          var singleBarData = []
          for (var c = 0; c < threeBar.length; c++) {
            singleBaryAxis.push(threeBar[c].brand)
            singleBarData.push(threeBar[c].bad_rate)
          }
          this.singleBaryAxis = singleBaryAxis
          this.singleBarData = singleBarData
          // 第二个多线图
          this.lineDataFunc(2, 'bad_rate')
        }, (res) => {
          this.timeoutStatus = true
        })
      }
    },
    events: {
      'filterConditions': function (filterConditions) {
        document.getElementsByClassName('loading-box')[0].style.display = 'block'
        if (filterConditions.brand !== '') {
          this.pinpai = filterConditions.brand
          this.pinpai = this.pinpai.replace(/,/g, '，')
        }
        if (filterConditions.platform !== '') {
          this.pingtai = filterConditions.platform
          this.pingtai = this.pingtai.replace(/,/g, '，')
        }
        this.pageParams.org_code = filterConditions.org_code || ''
        this.pageParams.brand = filterConditions.brand
        this.pageParams.brand_id = filterConditions.brand_id
        this.pageParams.category = filterConditions.category
        this.pageParams.category_id = filterConditions.category_id
        this.pageParams.platform = filterConditions.platform
        this.pageParams.platform_id = filterConditions.platform_id
        this.pageParams.dateSeg = filterConditions.dateSeg
        this.pageParams.startTime = filterConditions.starttime
        this.pageParams.endTime = filterConditions.endtime
        this.pageParams.brand_all = filterConditions.brand_all
        this.pageParams.mkey = this.routeKey
        this.$http.post(window.interface.indusPage, this.pageParams, {_timeout: 30000}).then((res) => {
          if (res.json().error) {
            this.timeoutStatus = true
            return
          }
          document.getElementsByClassName('loading-box')[0].style.display = 'none'
          var data = res.json()
          this.charts = res.json().chartDatas
          this.charts1 = this.charts[1]
          this.charts2 = this.charts[2]
          this.pinlei = data.categoryCnd || data.category
          this.pinpai = data.brandCnd || data.brand
          this.pingtai = data.platformCnd || data.platform
          this.startTime = data.startTime || ''
          this.endTime = data.endTime || ''
          // 第一个单柱图
          var threeBar = this.charts[1].detail
          var singleBaryAxis = []
          var singleBarData = []
          for (var c = 0; c < threeBar.length; c++) {
            singleBaryAxis.push(threeBar[c].brand)
            singleBarData.push(threeBar[c].bad_rate)
          }
          this.singleBaryAxis = singleBaryAxis
          this.singleBarData = singleBarData
          // 第二个多线图
          this.lineDataFunc(2, 'bad_rate')
          if (res.json().chartDatas.length === 0) {
            document.getElementsByClassName('experience-brand-content')[0].style.display = 'none'
            document.getElementsByClassName('no-data')[0].style.display = 'block'
            return
          }
          setTimeout(function () {
            var htmlHeight = document.documentElement.clientHeight
            var toorBarHeight = document.getElementsByClassName('toolbar')[0].clientHeight
            var filterMessageBox = document.getElementsByClassName('filter-message-box')[0].clientHeight
            var tapHeight = document.getElementsByClassName('tab')[0].clientHeight
            var contentDiv = document.getElementsByClassName('experience-brand-content')[0]
            contentDiv.style.height = htmlHeight - toorBarHeight - filterMessageBox - tapHeight + 'px'
          }, 0)
        }, (res) => {
          this.timeoutStatus = true
        })
      }
    },
    created () {
      this.routeKey = 'experienceBrand'
      var url = window.interface.indusPage
      this.httpFunction(url, this.firstPageParams)
      var sizeBase = parseInt(document.documentElement.style.fontSize)
      this.size10 = sizeBase * this.size10
      this.size12 = sizeBase * this.size12
      this.size13 = sizeBase * this.size13
      this.size14 = sizeBase * this.size14
    },
    filters: {
      timeFilter: function (val) {
        if (val) {
          val = val.split('-')
          val = val.join('')
          return val
        }
      }
    },
    ready: function () {
    }
  }
</script>

<style lang="scss" scoped>
  $height:6.9vh;
  div.condition-filter {
    position: relative;
    border-bottom: 1px solid #eeeeee;

  ul {
    width: 100%;
    height: $height;
    margin: 0;
    padding: 0;

  li {
    line-height: $height;
    text-align: center;
    /*color: rgba(102, 102, 102);*/
    color: #666666;
    overflow: hidden;

  &:last-child {
    border-right: none;
  }

  }
  .brandActive {
    position: relative;
    color: rgba(74, 144, 226, 1);
  }

  }

  .active-border {
    position: absolute;
    left: 5%;
    bottom: 0;
    width: 15%;
    height: 2px;
    border-radius: .2rem;
    background: url("") no-repeat center bottom;
    z-index: 1;
    transition: all .2s;
  }

  }
  .experience-brand-content {
    position: relative;
    /*padding-top: 19vh;*/
    /*margin-bottom: 7.4vh;*/
    height: 80%;
    overflow: auto;
  }
  .filter-message-box{
    width: 100%;
    margin-top: 6.6vh;
    /*position: fixed;*/
    /*top: 6.6vh;*/
    /*left: 0;*/
    background: white;
    z-index: 101;
    font-size: 0.28rem;
    padding: 1.7vh 0 2.1vh .3rem;
    box-sizing: border-box;
    border-bottom: 1px solid rgb(238, 238, 238);
  }

  .filter-condition{
    margin-right: 0.2rem;
    margin-top: 1.1vh;
    font-size: 0.24rem;
    float: left;
    color: #4A90E2;
    padding: 0.35vh 1.2vh;
    box-sizing: border-box;
    border: 1px solid #4A90E2;
    background: #FAFCFF;
    border-radius: 3px;
    max-width: 85%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .title-time {
    padding: 2.4vh 0 1.3vh 0;
    border-bottom: 1px solid #eeeeee;
    box-sizing: border-box;
  }

  .title {
    font-size: .32rem;
    background: url('../../../../static/img/time-title2.png') no-repeat center right;
    background-position: .3rem center;
    background-size: .28rem .26rem;
    padding-left: .7rem;
    color: #333333;
  }

  .important {
    margin: 2vh 0;
    font-size: .28rem;
    padding-left: .3rem;
    color: #666666;
  }

  .division0 {
    width: 100%;
    height: 1.5vh;
    background: rgb(238, 238, 238);
  }

  .chartContainer0 {
    width: 100%;
    height: 71vh;
  }

  .chartContainer1 {
    width: 100%;
    height: 60vh;
  }

  .chartContainer2 {
    width: 100%;
    height: 59vh;
  }

  .btnPage {
    position: fixed;
    left: 0;
    top: 50vh;
    width: 100%;
    z-index: 200;
  }

  .btn-previous {
    width: 0.4rem;
    height: 0.8rem;
    float: left;
    background: rgba(0, 0, 0, 0.2);
  }

  .btn-next {
    width: 0.4rem;
    height: 0.8rem;
    float: right;
    background: rgba(0, 0, 0, 0.2);
  }

  .leftButton {
    width: .5rem;
    height: 100%;
    background: url('../../../../static/img/btn-back.png') no-repeat center right;
    background-size: 100%;
  }

  .filterMore {
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgb(238, 238, 238);
  }

  .more1 ul {
    padding: 0 2.66% 0 4%;
  }

  .more1 li {
    width: 32%;
    height: 0.76rem;
    line-height: 0.76rem;
    text-align: center;
    box-sizing: border-box;
    border: 1px solid #eeeeee;
    margin: 2% 1.33% 0 0;
    overflow: hidden;
  }

  .moreTitle {
    font-size: 0.32rem;
    line-height: 0.45rem;
    padding: 0.2rem 0 0 4%;
    color: #000000;
  }

  .category-active {
    background: rgba(246, 250, 255, 1) url(../../../../static/img/filter-active-bg.png) no-repeat right bottom / 18%;
  }

</style>
